<template>
	<view class="container">
		<view class="notice flex-align-center" v-if="is_notice">
			<u-icon name="volume-up" color="#E80D0D" size="28"></u-icon>
			<view class="notice-tips">取货拍照，请在取货时进行检查并拍照存证</view>
			<view @click="is_notice = !is_notice">
				<u-icon name="close-circle-fill" color="#E80D0D" size="28"></u-icon>
			</view>
		</view>
		
		<view class="con">
			<view class="image bg-fff">
				<view class="image-title">取货拍照验证</view>
				<view class="image-tips">为了避免货物纠纷，请在取货时进行检查并拍照存证</view>
				<u-upload
					width="150rpx" 
					height="150rpx" 
					:header="{'Cookie': 'XDEBUG_TRIGGER=;'}"
					:form-data="{
						token: token,
						app_id: app_id,
					}"
					name="iFile"
					:action="$setting.baseUrl()+'/file.upload/image'" 
					@on-success="handleUploadSuccess"
					@on-remove="handleUploadRemove"></u-upload>
					
				<view style="margin-top: 30rpx;"></view>
				<b-u-button-theme width="100%" heigth="90rpx" @click="send">确认提交</b-u-button-theme>
			</view>
			
			<view class="user bg-fff">
				<view class="user-title">买家信息</view>
				<view class="user-item flex-align-center">
					<image class="user-image" :src="$setting.imageUrl()+'UserCircle.png'"></image>
					<view class="user-name" v-if="dataInfo.address">{{dataInfo.address.name}}</view>
				</view>
				<view class="user-item flex-space-between">
					<view class="flex-align-center">
						<image class="user-image" :src="$setting.imageUrl()+'Phone.png'"></image>
						<view class="user-name" v-if="dataInfo.address">{{dataInfo.address.phone}}</view>
					</view>
					<b-u-button-theme width="160rpx" height="52rpx" size="28rpx" @click="handlePhone()">联系买家</b-u-button-theme>
				</view>
			</view>
			
			<view class="info bg-fff">
				<view class="info-title">商品信息</view>
				
				<view class="product-item flex" v-for="(it,idx) in dataInfo.product" :key="idx">
					<image class="product-item-image" :src="it.image.file_path"></image>
					<view class="product-item-con">
						<view class="product-item-name u-line-1">{{it.product_name}}</view>
						<view class="product-item-suk">{{it.product_attr}}</view>
						<view class="flex-space-between">
							<view class="product-item-price">￥{{it.total_pay_price}}</view>
							<view class="product-item-num">x{{it.total_num}}</view>
						</view>
					</view>
				</view>
				
				<u-line color="rgba(225, 225, 225, 0.7)" />
				
				<view class="info-item flex-space-between">
					<view class="info-item-label">订单号码</view>
					<view class="info-item-value">{{dataInfo.order_no}}</view>
				</view>
				<view class="info-item flex-space-between">
					<view class="info-item-label">备注</view>
					<view class="info-item-value">{{dataInfo.buyer_remark}}</view>
				</view>
				<!-- <view class="info-item flex-space-between">
					<view class="info-item-label">发票信息</view>
					<view class="info-item-value"></view>
				</view> -->
				<view class="info-item flex-space-between">
					<view class="info-item-label">配送时间</view>
					<view class="info-item-value">尽快送达 [{{dataInfo.delivery_time | date("hh:MM")}}-{{$filter.sendTime(sendTime, dataInfo.delivery_time)}}]</view>
				</view>
				<view class="info-item flex-space-between">
					<view class="info-item-label">配送骑士</view>
					<view class="info-item-value" v-if="dataInfo.deliveryUser">{{dataInfo.deliveryUser.real_name}} {{dataInfo.deliveryUser.mobile}}</view>
				</view>
				<view class="info-item flex-space-between">
					<view class="info-item-label">支付方式</view>
					<view class="info-item-value" v-if="dataInfo.pay_type">{{dataInfo.pay_type.text}}</view>
				</view>
				<view class="info-item flex-space-between">
					<view class="info-item-label">下单时间</view>
					<view class="info-item-value">{{dataInfo.create_time}}</view>
				</view>
				<!-- <view class="info-item flex-space-between">
					<view class="info-item-label">送达时间</view>
					<view class="info-item-value" v-if="!$u.test.isEmpty(dataInfo.receipt_time)">{{dataInfo.receipt_time}}</view>
				</view> -->
			</view>
			
			<safe-area-inset-bottom></safe-area-inset-bottom>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Top: uni.getSystemInfoSync().statusBarHeight + "px",
				is_notice: true,
				token: uni.getStorageSync('token'),
				app_id: uni.$setting.appId,
				dataInfo: {},
				form: {
					order_id: "",
					image: [],
				},
				sendTime: 0,
			}
		},
		onLoad(options) {
			this.form.order_id = options.order_id;
			this.getHttp();
		},
		methods: {
			send() {
				if(this.form.image.length == 0) {
					uni.showToast({
						title: "请拍照确认",
						icon: "none"
					})
					return ;
				}
				
				let params = JSON.parse(JSON.stringify(this.form));
				params.image = this.form.image
				uni.$u.api.postClaimProduct(params).then(res => {
					uni.showModal({
						title: '提示',
						content: '已完成取货操作',
						showCancel: false,
						success: function (res) {
							if (res.confirm) {
								// console.log('用户点击确定');
								uni.navigateBack();
							} else if (res.cancel) {
								// console.log('用户点击取消');
							}
						}
					});
				})
			},
			handlePhone() {
				uni.makePhoneCall({
					phoneNumber: this.dataInfo.address.phone.toString()
				});
			},
			handleUploadSuccess(e) {
				this.form.image.push(e.data.file_path);
			},
			handleUploadRemove(index) {
				this.form.image.splice(index, 1);
			},
			getDeliveryDetail() {
				uni.$u.api.getDeliveryDetail({
					order_id: this.form.order_id,
					pay_source: 'wx',
				}).then(res => {
					this.dataInfo = res.order;
				})
			},
			getConfigData() {
				uni.$u.api.getConfigData({type: "sendTime"}).then(res => {
					this.sendTime = res.list[0].value;
				})
			},
			getHttp() {
				this.getDeliveryDetail();
				this.getConfigData();
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		
		.notice {
			padding: 18rpx 30rpx;
			background: rgba(232, 13, 13, 0.1);
			
			.notice-tips {
				padding: 0 14rpx;
				font-size: 24rpx;
				color: #E80D0D;
			}
		}
		
		.con {
			padding: 30rpx;
			
			.image {
				border-radius: 16rpx;
				padding: 20rpx 34rpx;
				
				.image-title {
					font-size: 32rpx;
					color: #111111;
					font-weight: bold;
				}
				
				.image-tips {
					margin-top: 16rpx;
					margin-bottom: 30rpx;
					font-size: 24rpx;
					color: #999999;
				}
			}
			
			.user {
				margin-top: 24rpx;
				padding: 20rpx 34rpx;
				border-radius: 16rpx;
				
				.user-title {
					font-size: 28rpx;
					color: #111111;
				}
				
				.user-item {
					margin-top: 20rpx;
				}
				
				.user-image {
					width: 48rpx;
					height: 48rpx;
				}
				
				.user-name {
					font-size: 28rpx;
					color: #111111;
					margin-left: 20rpx;
				}
			}
			
			.info {
				margin-top: 24rpx;
				padding: 20rpx 34rpx;
				border-radius: 16rpx;
				
				.info-title {
					font-size: 28rpx;
					color: #111111;
					margin-bottom: 24rpx;
				}
				
				.product-item {
					margin-bottom: 20rpx;
					
					.product-item-image {
						width: 128rpx;
						height: 128rpx;
					}
				
					.product-item-con {
						margin-left: 16rpx;
						flex: 1;
				
						.product-item-name {
							width: 460rpx;
							font-size: 28rpx;
							color: #111111;
						}
				
						.product-item-suk {
							font-size: 24rpx;
							color: #999999;
							margin-bottom: 10rpx;
						}
				
						.product-item-num {
							font-size: 24rpx;
							color: #999999;
						}
				
						.product-item-price {
							font-size: 28rpx;
							color: $uni-color-theme;
						}
					}
				}
				
				.info-item {
					margin-top: 40rpx;
					
					.info-item-label {
						font-size: 26rpx;
						color: #666666;
					}
					
					.info-item-value {
						font-size: 26rpx;
						color: #111111;
						margin-left: 30rpx;
						word-wrap: break-word;
						word-break: break-all;
					}
				}
				
			}
		}
	}
</style>
